<template>
  <div class="demo">
    <div class="demo-title">输入时格式化展示</div>
    <div class="demo-content">
      <Tooltip :trigger="['focus']" placement="topLeft">
        <template v-if="inputValue" #title>
          <span>{{ formatValue }}</span>
        </template>
        <Input
          v-model:value="inputValue"
          placeholder="Input a number"
          :max-length="25"
          style="width: 120px"
          @blur="onBlur"
        />
      </Tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import Tooltip from '@sscd/tooltip';
  import Input from '@sscd/input';
  function formatNumber(value: string) {
    value += '';
    const list = value.split('.');
    const prefix = list[0].charAt(0) === '-' ? '-' : '';
    let num = prefix ? list[0].slice(1) : list[0];
    let result = '';
    while (num.length > 3) {
      result = `,${num.slice(-3)}${result}`;
      num = num.slice(0, num.length - 3);
    }
    if (num) {
      result = num + result;
    }
    return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  }
  const inputValue = ref<string>('111');
  const formatValue = computed(() => {
    if (inputValue.value === '-') return '-';
    return formatNumber(inputValue.value);
  });
  const format = (val: string, preVal: string) => {
    const reg = /^-?\d*(\.\d*)?$/;
    if ((!isNaN(+val) && reg.test(val)) || val === '' || val === '-') {
      inputValue.value = val;
    } else {
      inputValue.value = preVal;
    }
  };
  // '.' at the end or only '-' in the input box.
  const onBlur = () => {
    if (inputValue.value.charAt(inputValue.value.length - 1) === '.' || inputValue.value === '-') {
      format(inputValue.value.slice(0, -1), inputValue.value);
    }
  };
  watch(
    () => inputValue.value,
    (val, preVal) => format(val, preVal)
  );
</script>

<style lang="less" scoped></style>
